<template>
    <div class="layout-container">
        <el-card>
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="租箱量" name="rentalQuantity"></el-tab-pane>
                <el-tab-pane label="租金" name="rent"></el-tab-pane>
            </el-tabs>
        </el-card>
        <template v-if="activeName == 'rentalQuantity'">
            <el-card class="marginTop20">
                <span class="_before">租箱量-日期分析</span>
                <ControlPanel :dataType="3" :timePeriod="timeInterval" :refType = '5' :showTimeTool="true" :showBoxTool="true" :showSortByField="false" @updateValue='getRentDate'></ControlPanel>
                <LineChart :config="lineConfig" @dataPointClick="dataPointClick"></LineChart>
            </el-card>
            <el-card class="marginTop20">
                <span class="_before">租箱量-未还分析</span>
                <ControlPanel :dataType="3" :timePeriod="timeInterval" :refType = '5' :showTimeTool="false" :showBoxTool="true" :showSortByField="false" @updateValue='getRentNotReturn'></ControlPanel>
                <BarChart :config="barConfig"></BarChart>
            </el-card>
            <el-card class="marginTop20">
                <span class="_before">租箱量-箱东分析</span>
                <ControlPanel :dataType="3" :timePeriod="timeInterval" :refType = '5' :showTimeTool="true" :showBoxTool="true" :showSortByField="false" @updateValue='getRentBoxEast'></ControlPanel>
                <BarLineChart :config="barLineConfig" @barClick="barLineClick"></BarLineChart>
                <div class="line"><div /></div>
                <ControlPanel :dataType="3" :timePeriod="timeInterval" :refType = '5' :showTimeTool="false" :showBoxTool="true" :showSortByField="true" @updateValue='getRentBoxEastNotReturn'></ControlPanel>
                <TwoBar :config="twoBarConfig" @barClick="twoBarClick"></TwoBar>
            </el-card>
        </template>
        <template v-if="activeName == 'rent'">
            <el-card class="marginTop20 text-center"> 
                租金-暂无数据
            </el-card>
        </template>

        <el-dialog v-model="bar1Dialog" destroy-on-close title="租箱量-提箱城市分析" width="1000">
            <BarChart1 :config="barConfig1"></BarChart1>
        </el-dialog>
        <el-dialog v-model="line1Dialog" destroy-on-close title="租箱量-箱东日期分析" width="1000">
            <ControlPanel :sources="1" :dataType="3" :timePeriod="timeInterval" :refType = '5' :showTimeTool="true" :showBoxTool="true" :showSortByField="false" :showCompanyName="true" :companyName="companyName" @updateValue='getRentBoxEastDate'></ControlPanel>
            <LineChart1 :config="lineConfig1"></LineChart1>
        </el-dialog>
        <el-dialog v-model="towBar1Dialog" destroy-on-close title="租箱量-还箱城市分析" width="1000">
            <ControlPanel :sources="1" :dataType="3" :timePeriod="timeInterval" :refType = '5' :showTimeTool="false" :showBoxTool="true" :showSortByField="true" :showCompanyName="true" :companyName="companyName" @updateValue='getRentBoxEastDate'></ControlPanel>
            <TwoBar1 :config="twoBarConfig1"></TwoBar1>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import ControlPanel from '@/views/businessAnalysis/controlPanel'
import { rentDate,rentNotReturn,rentBoxEast,rentBoxEastNotReturn,rentBoxEastNotReturnCity,rentCarryCity,rentBoxEastDate} from '@/api/businessAnalysis'
import LineChart from '@/views/businessAnalysis/chart/line'
import BarChart from '@/views/businessAnalysis/chart/bar'
import BarLineChart from '@/views/businessAnalysis/chart/barLine'
import TwoBar from '@/views/businessAnalysis/chart/twoBar'
import TwoBar1 from '@/views/businessAnalysis/chart/twoBar1'
import BarChart1 from '@/views/businessAnalysis/chart/bar1'
import LineChart1 from '@/views/businessAnalysis/chart/line1'


import Cookies from 'js-cookie'
import { ref,reactive,onMounted } from 'vue'
const activeName = ref('rentalQuantity')
let companyId:any
let companyName:any
try { 
    companyId =   JSON.parse(Cookies.get('User-Info')).companyId
    companyName =   JSON.parse(Cookies.get('User-Info')).companyName
} catch (error) {
    companyId =   Cookies.get('User-Info').companyId
    companyName =  Cookies.get('User-Info').companyName
}

// 获取当前日期
const currentDate = new Date();
const currentDateStr = getFormattedDate(currentDate);

// 获取7天后的日期
const futureDate = new Date();
futureDate.setDate(currentDate.getDate() + 6);
const futureDateStr = getFormattedDate(futureDate);

let cahrtData = {
    dataType:'3',
    timePeriod:[currentDateStr,futureDateStr],
    boxType:'1',
    boxCondition:'1',
    sortByField:'5',
    companyId:'',
    dataTime:currentDateStr,
    companyName:companyName
}

const timeInterval = ref([currentDateStr,futureDateStr]) //查询时间区间

// 租箱量- 日期分析-已提箱量-折线图
const lineConfig = reactive({
    xAxisData:[],
    yAxisData:[]
})
const getRentDate = async (_row:any) => {
    let reqParams = {
        dataType: _row.dataType,
        beginDataTime: _row.timePeriod[0],
        endDataTime: _row.timePeriod[1],
        boxType:_row.boxType == '1'?'':_row.boxType,
        boxCondition:_row.boxCondition == '1'?'':_row.boxCondition
    }
    await rentDate(reqParams).then(res=>{
        if(res.code == "00000"){
            lineConfig.xAxisData.length = 0
            lineConfig.yAxisData.length = 0
            res.data.forEach(item => {
                lineConfig.xAxisData.push(item.dataTime)
                lineConfig.yAxisData.push(item.boxQuantity)
            })
        }
    })
    cahrtData.dataType = _row.dataType
    cahrtData.boxType = _row.boxType
    cahrtData.boxCondition = _row.boxCondition
    
}
const bar1Dialog = ref(false)
const dataPointClick = (row:any) => {
    cahrtData.dataTime = row.name
    getRentCarryCity(cahrtData)
    bar1Dialog.value = true
}

// 租箱量-未还数据分析-柱状图
const barConfig = reactive({
    xAxisData:['未还总量','即将超期数量(<=10天)','超期的数量'],
    yAxisData:[]
})

const getRentNotReturn = async (_row:{
    boxType: string
    boxCondition: string
}) => { 
    let reqParams = {
        boxType: _row.boxType == '1'?'':_row.boxType,
        boxCondition: _row.boxCondition == '1'?'':_row.boxCondition
    }

    await rentNotReturn(reqParams).then(res=>{
        if(res.code == "00000"){
            barConfig.yAxisData.length = 0
            if(res.data.notReturnQty){
                barConfig.yAxisData.push(res.data.notReturnQty)
            }
            if(res.data.nearOverdueUnReturnQty){
                barConfig.yAxisData.push(res.data.nearOverdueUnReturnQty)
            }
            if(res.data.overdueUnReturnQty){
                barConfig.yAxisData.push(res.data.overdueUnReturnQty)
            }
           
          
        }
    })
}

//租箱量-箱东分析-已提箱量|占比-柱状图|折线图
const barLineConfig = reactive({
    xAxisData:[],
    yAxisDataBar:[],
    yAxisDataLine:[]
})
const getRentBoxEast = async (_row: any) => { 
    let reqParams = {
        dataType:_row.dataType,
        beginDataTime:  _row.timePeriod[0],
        endDataTime:  _row.timePeriod[1],
        boxType: _row.boxType == '1'?'':_row.boxType,
        boxCondition: _row.boxCondition == '1'?'':_row.boxCondition
    }
    await rentBoxEast(reqParams).then(res=>{ 
        if(res.code == '00000'){
            barLineConfig.xAxisData.length = 0
            barLineConfig.yAxisDataBar.length = 0
            barLineConfig.yAxisDataLine.length = 0
            lineConfig1.companyInfo.length = 0
            res.data.forEach(item=>{ 
                barLineConfig.xAxisData.push(item.companyName)
                barLineConfig.yAxisDataBar.push(item.boxQuantity)
                barLineConfig.yAxisDataLine.push(item.proportion)
                const company = {companyId: item.companyId,companyName:item.companyName}
                lineConfig1.companyInfo.push(company)
            }) 

        }
    })
    cahrtData.timePeriod = _row.timePeriod
    cahrtData.dataType = _row.dataType
    cahrtData.boxType = _row.boxType
    cahrtData.boxCondition = _row.boxCondition
    
}

const line1Dialog = ref(false)
const barLineClick = (raw: any) => { 
    lineConfig1.companyInfo.forEach(item => { 
        if(item.companyName == raw.name){ 
            cahrtData.companyId = item.companyId
            companyName = item.companyName
        }
    })
    getRentBoxEastDate(cahrtData)
    line1Dialog.value = true
}

//租箱量:箱东分析-正常待还|超期待还-柱状图
const twoBarConfig = reactive<{
  xAxisData: string[]
  yAxisNormalDataBar: number[]
  yAxisOverDataBar: number[]
}>({
  xAxisData: ['亚航','陆海'],
  yAxisNormalDataBar: [5,10],
  yAxisOverDataBar: [10,5]
})
const getRentBoxEastNotReturn = async(_row: any) => { 
    let reqParams = {
        boxType: _row.boxType == '1'?'':_row.boxType,
        boxCondition: _row.boxCondition == '1'?'':_row.boxCondition,
        sortByField: _row.sortByField
    }
    await rentBoxEastNotReturn(reqParams).then(res => { 
        if(res.code == '00000' && res.data.length > 0){
            twoBarConfig.xAxisData.length = 0
            twoBarConfig.yAxisNormalDataBar.length = 0
            twoBarConfig.yAxisOverDataBar.length = 0
            twoBarConfig1.companyInfo.length = 0
            res.data.forEach(item => { 
                twoBarConfig.xAxisData.push(item.companyName)
                twoBarConfig.yAxisNormalDataBar.push(item.normalUnReturnQty)
                twoBarConfig.yAxisOverDataBar.push(item.overdueUnReturnQty)
                const company = {companyId: item.companyId,companyName:item.companyName}
                twoBarConfig1.companyInfo.push(company)
            })
            cahrtData.boxType = _row.boxType
            cahrtData.boxCondition = _row.boxCondition
            cahrtData.sortByField = _row.sortByField
        }
    })
}

const towBar1Dialog = ref(false)
const twoBarClick = (row:any) => {
    twoBarConfig1.companyInfo.forEach(item => { 
        if(item.companyName === row.name){
            cahrtData.companyId = item.companyId
        }
    })
    getRentBoxEastNotReturnCity(cahrtData)
    towBar1Dialog.value = true
}
// 租箱量-还箱城市分析-正常待还|超期待还-柱状图
const twoBarConfig1 = reactive({
    xAxisData:[],
    yAxisNormalDataBar:[],
    yAxisOverDataBar:[],
    companyInfo:[]
})
const getRentBoxEastNotReturnCity = async(_row:any) => { 
    let reqParams = {
        companyId:cahrtData.companyId || companyId,
        boxType: _row.boxType == '1'?'':_row.boxType,
        boxCondition: _row.boxCondition == '1'?'':_row.boxCondition,
        sortByField: _row.sortByField
    } 
    await rentBoxEastNotReturnCity(reqParams).then(res => { 
        if(res.code == '00000' && res.data.length > 0){
            twoBarConfig1.xAxisData.length = 0
            twoBarConfig1.yAxisNormalDataBar.length = 0
            twoBarConfig1.yAxisOverDataBar.length = 0
            res.data.forEach(item => { 
                twoBarConfig1.xAxisData.push(item.cityName)
                twoBarConfig1.yAxisNormalDataBar.push(item.normalUnReturnQty)
                twoBarConfig1.yAxisOverDataBar.push(item.overdueUnReturnQty)
            })

        }
    })
}

// 租箱量-城市分析-已提箱量柱状图查询
const barConfig1 = reactive({
    xAxisData:[],
    yAxisData:[]
})
const getRentCarryCity= async(_row:{
    dataType: string
    dataTime: string
    boxType: string
    boxCondition: string
    })=>{ 
        let reqParams = {
            dataType:_row.dataType,
            dataTime:_row.dataTime,
            boxType: _row.boxType == '1'?'':_row.boxType,
            boxCondition: _row.boxCondition == '1'?'':_row.boxCondition,
            } 
        await rentCarryCity(reqParams).then(res => { 
            if(res.code == '00000' && res.data.length > 0 ){
                // barConfig1.xAxisData = ['郑州','武汉','西安','青岛'],
                // barConfig1.yAxisData = [1,2,3,4]
                // barConfig1.xAxisData = ['郑州','武汉','西安','青岛'],
                // barConfig1.yAxisData = [1,2,3,4]
                barConfig1.xAxisData.length = 0
                barConfig1.yAxisData.length = 0
                res.data.forEach(item => { 
                    barConfig1.xAxisData.push(item.cityName)
                    barConfig1.yAxisData.push(item.boxQuantity)
                })
        }

    })  
}

// 租箱量-箱东日期分析-已提箱量-折线图
const lineConfig1 = reactive({
    xAxisData: [],
    yAxisData: [],
    companyInfo:[]
})
const getRentBoxEastDate = async(_row:any) => {
    let reqParams = {
            companyId:_row.companyId || companyId,
            dataType:_row.dataType,
            beginDataTime: _row.timePeriod[0],
            endDataTime: _row.timePeriod[1],
            boxType: _row.boxType == '1'?'':_row.boxType,
            boxCondition: _row.boxCondition == '1'?'':_row.boxCondition,
        } 
    await rentBoxEastDate(reqParams).then(res => { 
        if(res.code == '00000' && res.data.length > 0){
            lineConfig1.xAxisData.length = 0
            lineConfig1.yAxisData.length = 0
            res.data.forEach(item => { 
                lineConfig1.xAxisData.push(item.dataTime)
                lineConfig1.yAxisData.push(item.boxQuantity)
            })

        }
    }) 
}



onMounted(() => {
    getRentDate(cahrtData)
    getRentNotReturn(cahrtData)
    getRentBoxEast(cahrtData)
    getRentBoxEastNotReturn(cahrtData)
})


// 获取时间区间
function getFormattedDate(date: Date): string {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}${month}${day}`;
}

</script>
<style lang="scss" scoped>
.layout-container{
    padding: 0 20px;
    .line{
        height: 50px;
    }
}
</style>